<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<head th:include="/base/common_css('test')">
<body>
<div th:include="/base/common_banner"></div>
<!-- Main content starts -->

<div class="content">
    <!-- Sidebar -->
    <div th:include="/base/common_menu"></div>
    <!-- Sidebar
    <div class="sidebar">
        <div class="sidebar-dropdown"><a href="#">Navigation</a></div>

    </div>-->
    <!-- Matter -->
    <div class="mainbar">
        <!-- Page heading -->
        <div th:include="/base/common_pageHeader"></div>

        <div class="matter">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">

                        <div class="widget wgreen">

                            <div class="widget-head">
                                <div class="pull-left">编辑系统图片</div>
                                <div class="widget-icons pull-right">
                                    <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a>
                                    <a href="#" class="wclose"><i class="icon-remove"></i></a>
                                </div>
                                <div class="clearfix"></div>
                            </div>

                            <div class="widget-content">
                                <div class="padd">

                                    <!-- Form starts.  -->
                                    <form class="form-horizontal" role="form" action="#" method="post">

                                        <div class="modal-body">
                                            <form action="#" method="post"
                                                  enctype="multipart/form-data">
                                                <input class="col-lg-4 form-control " type="hidden" id="sysId"
                                                       th:value="${sysId}">

                                                <div class="form-group">
                                                    <label class="col-lg-4 control-label">图片类型</label>
                                                    <div class="col-lg-8">
                                                        <select id="sysImgType"
                                                                class="selectpicker show-tick form-control">
                                                            <option th:each="sysImgs:${imgTypeList}"
                                                                    th:value="${sysImgs.key}" th:text="${sysImgs.value}"
                                                                    th:selected="${sysImgs.key == sysImgType}"></option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-lg-4 control-label">专辑</label>
                                                    <div class="col-lg-8">
                                                        <select id="albId" class="selectpicker show-tick form-control">
                                                            <option th:each="album, albumStat:${albumList}"
                                                                    th:value="${album.albId}"
                                                                    th:text="${album.albName}"
                                                                    th:selected="${album.albId == args1}"></option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-lg-4 control-label">是否展示</label>
                                                    <div class="col-lg-8">
                                                        <select th:value="${isShow}" id="isShow">
                                                            <option value="1">是</option>
                                                            <option value="0">否</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-lg-4 control-label">图片上传</label>
                                                    <div class="col-lg-1">
                                                        <img th:src="${sysImgUrlLocal}"
                                                             style="width: 60px;height: 80px;" class="sys_url">
                                                        <input type="hidden" id="uploadSysImg" th:value="${sysImgUrl}">
                                                    </div>

                                                    <div class="col-lg-8">
                                                        <button class=" col-lg-1 btn btn-success pull-left"
                                                                data-toggle="modal"
                                                                data-target="#addCate">选择
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-success" onclick="saveImage()">保存
                                    </button>
                                    <button type="button" class="btn btn-cancel" onclick="cancer()">取消
                                    </button>

                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<div class="modal fade" id="addCate" tabindex="-1" role="dialog"
     aria-labelledby="addCateLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    上传图片
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" action="/view/uploadSysImg" enctype="multipart/form-data"
                      method="post">
                    <div class="form-group">
                        <label class="col-lg-4 control-label">文件上传</label>
                        <div class="col-lg-8">
                            <input id="fileName" type="file" class="form-control pull-right">
                        </div>
                        <button type="button" class="btn btn-success" onclick="SysImageUpload()">
                            上传
                        </button>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">是否压缩</label>
                        <div class="col-lg-8">
                            <div class="col-lg-8" style="height: 28px">
                                <div class="make-switch" id="isZip" data-on="primary" data-off="info">
                                    <input type="checkbox" checked value="1" data-th-size="small">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                            onclick="close()">确定
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- Mainbar ends -->
    <div class="clearfix"></div>

</div>

<!-- Mainbar ends -->
<div class="clearfix"></div>

</div>
<!-- Content ends -->

<div th:include="/base/common_footer"></div>
<!-- Scroll to top -->
<span class="totop"><a href="#"><i class="icon-chevron-up"></i></a></span>
<!--js????-->
<div th:include="/base/common_js"></div>
<script type="text/javascript">


    function cancer() {
        location.href = "/view/sysImg?pageNumber=1&pageSize=10";

    }

    function saveImage() {

            var data = {
                'sysId': $('#sysId').val(),
                'sysImgType': $('#sysImgType').val(),
                'isShow': $('#isShow').val(),
                'args1': $('#albId').val(),
                'sysImgUrl': $('#uploadSysImg').val()

            }
            $.ajax({
                type: "POST",
                url: "/view/updateSysImg",
                data: data,
                dataType: "json",
                success: function (data) {
                    if (data.data) {
                        window.location.href = "/view/sysImg?pageNumber=1&pageSize=10";
                    }
                },

            });

    }
    //上传图片
    function SysImageUpload() {
        $.bootstrapLoading.start({loadingTips: "正在处理数据，请稍候..."});
        var formData = new FormData();
        var files = $('#fileName')[0].files;
        for (var i = 0; i < files.length; i++) {
            formData.append("fileName", $('#fileName')[0].files[i]);
        }
        formData.append("sysId", $('#sysId').val());
        formData.append("isZip", $("#isZip").val());
        $.ajax({
            url: "/view/uploadSysImg",
            type: "POST",
            data: formData,
            //必须false才会自动加上正确的Content-Type
            contentType: false,
            //必须false才会避开jQuery对 formdata 的默认处理
            //XMLHttpRequest会对 formdata 进行正确的处理
            processData: false,
            success: function (data) {
                if (data.data !== undefined) {
                    $('.sys_url').attr("src", data.data.sysImgUrl);
                    $('#uploadSysImg').val(data.data.sysImgUrlLocal);
                }

            },
            complete: function () {
                $.bootstrapLoading.end();
            }
        });
    }
    //点击开关改变值
    $('#isZip').on('switch-change', function (e, data) {
        if (data.value == true) {
            $("#isZip").val(1);
        } else {
            $("#isZip").val(0);
        }
    });
    $().ready(function () {
        //给开关加默认值
        $("#isZip").val(1);
    });

</script>
</body>
</html>